<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/swiper-bundle.min.js"></script>
</head>
<body>
    <header>
        <div class="search">
            <input type="text" placeholder="著名景点">     
        </div>
    </header>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./image/banner/bg2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./image/banner/bg3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./image/banner/bg4.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <nav>
        <ul class="nav1">
            <li>泰山</li>
            <li>嵩山</li>
            <li>华山</li>
            <li>恒山</li>
            <li>黄山</li>
            <li>庐山</li>
        </ul>
        <ul class="nav2">
            <li>
                <img src="./image/bg/bg2.jpg" alt="">
                <div>111</div>
            </li>
            <li>
                <img src="./image/bg/bg2.jpg" alt="">
                <div>111</div>
            </li>
            <li>
                <img src="./image/bg/bg2.jpg" alt="">
                <div>111</div>
            </li>
            <li>
                <img src="./image/bg/bg2.jpg" alt="">
                <div>111</div>
            </li>
            <li>
                <img src="./image/bg/bg2.jpg" alt="">
                <div>111</div>
            </li>
            <li>
                <img src="./image/bg/bg2.jpg" alt="">
                <div>111</div>
            </li>
        </ul>
    </nav>

    <article>
        <ul>
            <li>
                <img src="./image/bg/bg8.jpg" alt="">
            </li>
            <li>
                <img src="./image/bg/bg12.jpg" alt="">
            </li>
            <li>
                <img src="./image/bg/bg10.jpg" alt="">
            </li>
            <li>
                <img src="./image/bg/bg11.jpg" alt="">
            </li>
        </ul>
    </article>
    <!-- <aside>
        <img src="./image/logo/localnav_bg.png" alt="">
    </aside> -->
    <footer>
        
    </footer>


    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable:true
          },
          autopaly:{
            stopOnLastSlide:true,
          },
        

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
        //   scrollbar: {
        //     el: '.swiper-scrollbar',
        //   },
        })        
        </script>
</body>
</html>